import React from 'react';
import { Card, Divider } from 'antd';
import ProTable from '@ant-design/pro-table';
import { PageContainer } from '@ant-design/pro-layout';
import Header from './components/DetailHeader';
import Search from './components/DetailSearch';
import { detailColumns as columns } from './columns';
import { pageItemList } from '@/services/Budget';


class Detail extends React.Component {

  constructor(props) {
    super(props);
    const id = props.location.query.id;
    this.id = id;
    this.state = {
      params: {
        budgetId: id
      }
    }
    this.proTableRef = React.createRef();
  }

  /* 监听搜索 查询 */
  onSearch = async (data) => {
    const params = this.state.params;
    this.setState({ params: { ...params, ...data } });
    this.proTableRef.current.reload();
  }

  /* 监听搜索 重置 */
  onReset = () => {
    const id = this.id;
    this.setState({ params: {budgetId: id} });
    this.proTableRef.current.reload();
  }

  /* 
  * 获取分页列表
  */
  getPageList = async (currentParams) => {
    try {
      const params = this.state.params;
      const res = await pageItemList({
        ...params,
        ...currentParams
      })
      return {
        success: true,
        data: res.data,
        total: res.totalSize
      }
    } catch (e) {
      console.error(e)
    }
  }

  render() {
    return (
      <PageContainer>
        <Card
          style={{ paddingBottom: 24, borderBottom: 1 }}
          headStyle={{ borderBottom: "none" }}
          bodyStyle={{ paddingTop: 0, paddingBottom: 0 }}
          title="预订单信息"
          bordered={false}>
          <Header />
        </Card>
        <div style={{ paddingLeft: 16, paddingRight: 16, backgroundColor: "#fff" }}>
          <Divider style={{ margin: 0 }} />
        </div>
        <Card
          headStyle={{ borderBottom: "none" }}
          bodyStyle={{ paddingTop: 0, paddingBottom: 0 }}
          title="预订书籍"
          bordered={false}>
          <Search search={this.onSearch} reset={this.onReset} />
        </Card>
        <ProTable
          actionRef={this.proTableRef}
          rowKey='id'
          scroll={{ x: true }}
          search={false}
          columns={columns}
          request={this.getPageList} />
      </PageContainer>
    )
  }
}

export default Detail